import { NavBar, Icon ,SearchBar,List} from "antd-mobile";
import { connect } from "dva";
import { Link,routerRedux} from "dva/router";
import { useState,useEffect } from "react";
const Item = List.Item;
let  Query = ({content,dispatch}) => {
  const {searchList} = content;
  const [value,setVal]=useState("");
  const [qlist,setQlist]=useState(searchList);
  const [time,setTime]=useState('');
  useEffect(()=>{
    setQlist(searchList)
  },[searchList])
  //独创 react hooks实现函数节流
  useEffect(()=>{
     clearTimeout(time);
     let tout=setTimeout(()=>{
       query(value);
     },800);
     setTime(tout);
  },[value])
  
  const onChange=(value)=>{
     setVal(value);
  } 
  
  const query=(value)=>{
    dispatch({
      type: "content/getQuery",
      payload: {
        query: value
      },
     });
  }
  const onCancel=()=>{
     setVal("")
  }
  const queryDetail=(value)=>{
     dispatch(routerRedux.push('/querydetail'));
     dispatch({
      type: "content/queryDetail",
      payload: {
         querysea: value,
      
      },
     });
  }
  return (
    <div>
      <NavBar
        style={{zIndex:'100'}}
        mode="light"
        leftContent={[
          <Link to="/" key="1">
            <Icon type="left"  />
          </Link>,
        ]}
      >
        商品搜索
      </NavBar>
      <SearchBar
        style={{height:'60px'}}
        value={value}
        placeholder="请输入查询的内容"
        onSubmit={value => console.log(value, 'onSubmit')}
        onClear={value => console.log(value, 'onClear')}
        onFocus={() => console.log('onFocus')}
        onBlur={() => console.log('onBlur')}
        onCancel={() =>onCancel()}
        showCancelButton
        onChange={(value)=>onChange(value)} />
      <List  >
        {qlist.length>0?(qlist.map((item,index)=>(<Item  arrow="horizontal" onClick={() =>queryDetail(item.q)}>{item.q}</Item>))):""}
      </List>
    </div>
  );
};
export default connect(({content }) => ({ content}))(Query);
